import { Mut, VueService, Link } from 'vue3-oop'
import { NCard,NSpace,NButton,NDataTable,NPagination,PaginationProps,DialogReactive } from "naive-ui"
import styles from "./index.module.scss"
import SearchBar from "../SearchBar"

interface IProps {
  title?:string,
  rowKey?:string,
  multiple?:boolean,
  columns?:any[],
  data?:any[],
  pagination?:PaginationProps,
  onSearch?:(value:any)=>void,
  onConfirm?:(keys:any[],rows?:any[])=>void,
  width?:number,
  height?:number,
}
export default class SelectDialog extends VueService {

  // 标题
  @Mut() private title = "数据选择";
  // 行主键
  @Mut() private rowKey = "id";
  // 多选
  @Mut() private multiple = false;
  // 列
  @Mut() private columns = [] as any[]
  // 数据
  @Mut() private data = [] as any[]
  // 分页
  @Mut() private pagination = {
    page: 1,
    pageSize: 10,
    itemCount: 0
  } as PaginationProps
  // 勾选的数据主键数组
  @Mut() private checkedRowKeys = [] as any[];
  // 勾选的数据数组
  @Mut() private checkedRows = new Map<string,any>();
  // 快速搜索
  private onSearch=(value:any)=>{}

  private searchBar?:SearchBar;
  private setSearchBar=(searchBar:any)=>{this.searchBar = searchBar;}
  // 快速搜索值
  getSearchValue =()=>this.searchBar?.getValue()||"";

  private onConfirm=(keys:any[],rows?:any[])=>{console.log(keys,rows);}

  @Mut() private width = 600;
  @Mut() private height = 400;

  // 对话框
  private dialog?: DialogReactive;

  constructor(props?:IProps) {
    super();
    this.title = props?.title || this.title;
    this.rowKey = props?.rowKey || this.rowKey;
    this.multiple = props?.multiple || this.multiple;
    this.columns = props?.columns || this.columns;
    this.data = props?.data || this.data;
    this.pagination = props?.pagination || this.pagination;
    this.onSearch = props?.onSearch || this.onSearch;
    this.onConfirm = props?.onConfirm || this.onConfirm;
    this.width = props?.width || this.width;
    this.height = props?.height || this.height;
  }

  setTitle=(title:string)=>this.title = title
  setRowKey=(rowKey:string)=>this.rowKey = rowKey
  setMultiple=(multiple:boolean)=>this.multiple = multiple
  setColumns=(columns:any[])=>this.columns = columns
  setData=(data:any[])=>this.data = data
  setItemCount=(itemCount:number)=>this.pagination.itemCount = itemCount
  setPage=(newPage:number)=>this.pagination.page = newPage
  getPage=()=>this.pagination.page
  getPageSize=()=>this.pagination.pageSize
  setOnUpdatePage=(onUpdatePage:(newPage:number)=>void)=>this.pagination.onUpdatePage = onUpdatePage
  setOnSearch=(onSearch:(value:any)=>void)=>this.onSearch=onSearch
  setOnConfirm=(onConfirm:(keys:any[],rows?:any[])=>void)=> this.onConfirm = onConfirm

  private handleCheckRowKeys=(keys:any[])=>{
    this.checkedRowKeys = keys;
    this.data.forEach(item=>{
      if(keys.includes(item[this.rowKey])){
        this.checkedRows.set(item[this.rowKey],item);
      }else{
        this.checkedRows.delete(item[this.rowKey]);
      }
    })
  }

  private handleConfirm=()=>{
    const keys = JSON.parse(JSON.stringify(this.checkedRowKeys));
    const rows = [] as any[];
    this.checkedRows.forEach(row=>{rows.push(JSON.parse(JSON.stringify(row)))})
    this.onConfirm(keys,rows);
    this.close();
  }

  // 关闭对话框
  close=()=>{
    this.dialog?.destroy();
    this.dialog = undefined;
  }



  // Add another table to show those selected data value and name
  // show selectd counts button and click the button to see selected data



  // 打开对话框
  open = ()=>{
    this.dialog = window.$dialog.warning({
      ...{class: [styles.select_dialog]},
      style: {width:`${this.width}px`,height:`${this.height}px`},
      showIcon: false, closable: false,
      content:()=>(
        <NCard
          title={this.title}
          headerStyle={{padding:"10px"}}
          contentStyle={{padding:"0 10px"}}
          footerStyle={{padding:"10px"}}
        >
          {{
            "header-extra":()=><SearchBar ref={this.setSearchBar} onSearch={this.onSearch}/>,
            default:()=>(
              <NDataTable
                remote striped
                rowKey={(row:any)=>row[this.rowKey]}
                columns={[{type:"selection",multiple:this.multiple},...this.columns]}
                data={this.data}
                pagination={undefined}
                onUpdateCheckedRowKeys={this.handleCheckRowKeys}
                maxHeight={this.height-108}
              />
            ),
            footer:()=>(
              <NSpace style={{display:"flex",justifyContent:"space-between"}}>
                <NPagination {...this.pagination} />
                <NSpace>
                  <NButton onClick={this.handleConfirm} disabled={this.checkedRowKeys.length===0}>确定</NButton>
                  <NButton onClick={this.close}>取消</NButton>
                </NSpace>
              </NSpace>
            )
          }}
        </NCard>
      )
    });
  }

}
